最近想写个博客，因为一直对vue情有独钟就想看看有没有什么开源的博客工具。
搜索一番发现了vuepress，然后才发现原来很多开源的vue组件或者工具的文档都是用这个来写的。。。
但是发现由于这个极其适合部署在github pages上就没人写怎么部署在nginx上，稍微踩了一点坑总结一下。官方部署的文档链接
基本配置
主要关注配置中的
base
类型: string 默认值: / 部署站点的基础路径，如果你想让你的网站部署到一个子路径下，你将需要设置它。如 Github pages，如果你想将你的网站部署到 https://foo.github.io/bar/，那么 base 应该被设置成 "/bar/"，它的值应当总是以斜杠开始，并以斜杠结束。 base 将会自动地作为前缀插入到所有以 / 开始的其他选项的链接中，所以你只需要指定一次。
这个配置是最基本的路由的配置，vuepress同vue其他项目一样都是单页应用，通过配置这个来解决基础路由的问题。我遇到的问题也就是在nginx上如何配置这个路由。
nginx上配置
base配置为"/"
相应的nginx配置十分简单，直接指定端口如下面示例的8081，并指定root路径（即build后放在服务器的路径）。
server {
listen 8081;
location / {
root /root/product/doc/dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
base配置为"/doc"
比如本站，配置的为/doc，配置也很简单，只需要上面的location由/改为/doc/，注意最后一个斜杠
同时部署了两个vue服务
如本站"/"这个目录是有一个vue服务的，现在又想在同样的端口配置vuepress并且路径是/doc应该怎么办呢
下面是nginx的配置
server {
listen 80;
server_name apex-asst;
client_max_body_size 20m;
charset utf-8;
#root /root/product;
location / {
root /root/product/dist;
try_files $uri $uri/ /index.html;
index index.html;
}
location @rewrites {
rewrite ^(.+)$ /index.html last;
}
#配置了转发
location /doc/ {
proxy_pass http://localhost:8081/;
}
}
#在8081上起了vuepress
server {
listen 8081;
location / {
root /root/product/doc/dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
发布于 2019-03-08